<template>
  <div>
    <div v-for="(item,index) in permission" :key="index" class="item" >
      <div v-if="item.url != 'SYSTEM_PMS' || $store.getters.project == null" class="item-module">
        <div class="item-module-left" :style="{'padding-left':padding + 'px'}" >
          <a-icon
            :style="{'visibility' : item.children && item.children.length ? 'visible' : 'hidden'}"
            class="item-module-left-icon"
            :type="item.isExpand ? 'caret-down' : 'caret-right'"
            theme="filled"
            @click="expandChange(item)"
          />
          <a-checkbox :checked="item.checked || item.isPublic == 1" :key="item.id" @change="(e) => checkChange(e.target.checked,item)" :disabled="item.isPublic == 1 || !isEdit" >
            {{ item.name }}
          </a-checkbox>

        </div>
        <div v-if="item.child && item.child.length" class="item-module-right" >
          <a-checkbox
            v-for="(item1,index1) in item.child"
            :key="item1.id"
            class="item-module-right-box"
            :checked="item1.checked || item1.isPublic == 1"
            @change="(e) => pmsChange(index1,e.target.checked,item,item1)"
            :disabled="item1.isPublic == 1 || !isEdit"
          > {{ item1.name }} </a-checkbox>

        </div>
      </div>
      <!-- 项目级 权限配置隐藏 -->
      <MyPermission
        :ref="'table_' + item.id"
        v-show="item.isExpand && (item.url != 'SYSTEM_PMS' || $store.getters.project == null)"
        :is-edit="isEdit"
        :padding="padding + 20"
        :permission="item.children"
        @parentSelected="parentSelected(item)"
        @parentUnSelected="parentUnSelected(item)"
        @updateChange="updateChange"
      />
    </div>

  </div>
</template>
<script>
export default {
  name: 'MyPermission',
  props: {
    permission: {
      default: () => {
        return []
      },
      type: Array
    },
    padding: {
      default: 0,
      type: Number
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    expandChange (item) {
      this.$set(item, 'isExpand', !item.isExpand)
      this.$forceUpdate()
    },
    updataView () {
      this.$forceUpdate()
      if (this.permission && this.permission.length) {
        this.permission.forEach(item => {
           this.$refs['table_' + item.id][0].updataView()
        })
      }
    },
    updateChange () {
      this.$emit('updateChange')
    },
    // flag 判断是否是按钮触发
    checkChange (e, item, flag = true) {
      this.$set(item, 'checked', e)
      // 如果有children  下级默认全选中
      // 如果是选中 默认把上级勾选；如果未选中 并且所有平级都没选中，上级不勾选
      if (flag && item.children && item.children.length) {
        this.$refs['table_' + item.id][0].childSelectAll(e)
      }
      if (item.child && item.child.length) {
        if (item.checked) {
          // 如果选中 把第一个选中
          // 如果子集没有选中的 把第一个默认选中
          // const data = item.child.find(item => {
          //   return item.checked
          // })
          // if (!data) {
          //   this.$set(item.child[0], 'checked', true)
          // }
          // 不管子级有没有 都要选中第一个
          this.$set(item.child[0], 'checked', true)
        } else {
          // 未选中 把子集全部置空
          item.child.forEach(item1 => {
            this.$set(item1, 'checked', false)
          })
        }
      }
      if (item.checked) {
        this.$emit('parentSelected')
      } else {
        const data = this.permission.find(item => {
          return item.checked
        })
        if (!data) {
          this.$emit('parentUnSelected')
        }
      }
      this.$forceUpdate()
      this.$emit('updateChange')
    },
    pmsChange (index1, e, item, item1) {
      this.$set(item1, 'checked', e)
      if (item1.checked) {
        this.$set(item, 'checked', true)
        this.checkChange(true, item, false)
      } else {
        if (index1 === 0) {
          // 如果是第一个
          this.$set(item, 'checked', false)
          this.checkChange(false, item, true)
        } else {
          let data = null
          let data1 = null
          if (item.child) {
            data = item.child.find(item1 => {
              return item1.checked
            })
          }
          if (item.children) {
            data1 = item.children.find(item1 => {
              return item1.checked
            })
          }

          if (!data && !data1) {
            this.$set(item, 'checked', false)
            this.checkChange(false, item, false)
          }
        }
      }
      this.$forceUpdate()
      this.$emit('updateChange')
    },
    // 把他及他的下级 跟 平级的权限第一个操作 默认选中
    setPermissionCheck (permission, flag) {
      if (permission && permission.length) {
        permission.forEach(item => {
          this.$set(item, 'checked', flag)
          if (item.child && item.child.length) {
            if (flag) {
              this.$set(item.child[0], 'checked', flag)
            } else {
              item.child.forEach(item1 => {
                this.$set(item1, 'checked', flag)
              })
            }
          }
          this.$refs['table_' + item.id][0].childSelectAll(flag)
        })
      }
    },
    childSelectAll (flag) {
      if (this.permission) {
        this.setPermissionCheck(this.permission, flag)
      }
      this.$forceUpdate()
    },
    parentSelected (item) {
      this.$set(item, 'checked', true)
      this.checkChange(true, item, false)
      this.$forceUpdate()
    },
    parentUnSelected (item) {
      // 查看他本本级操作有没有勾选的
      let mData = null
      let mData1 = null
      if (item.child && item.child.length) {
        mData = item.child.find(item1 => {
          return item1.checked
        })
      }
      if (item.children && item.children.length) {
        mData1 = item.children.find(item1 => {
          return item1.checked
        })
      }
      if (!mData && !mData1) {
        this.$set(item, 'checked', false)
        this.checkChange(false, item, false)
      }

      this.$forceUpdate()
    }
  }

}
</script>
<style lang="less" scoped>
  .item{
    &-module{
      display: flex;
      border-bottom: 1px solid #fafafa;
      &-left{
        width: 260px;
        display: flex;
        align-items: center;
        padding: 5px 10px;
        background: #F1F5F8;

        &-icon{
          font-size: 16px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      &-right{
        flex: 1;
        display: inline-block;
        padding-top: 10px;
        &-box{
          margin: 0 10px 10px 10px;
          width: 120px;
        }
      }
    }
  }
</style>
